<!DOCTYPE html>
<html>
	<head>
		<meta charset="utf-8">
		<meta name="viewport" content="width=device-width, initial-scale=1, maximum-scale=1, user-scalable=no">
		<title></title>
		<script src="js/init.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/main.css"/>
		<link rel="stylesheet" type="text/css" href="css/loaders.css"/>
	</head>
	<body>
		<div class="mainbox index"  >
			<div id="main">
			
<!--loading  start -->
			<div id="j-loading" class="loading" >
				<img class="bg" src="images/loading_bj.jpg" alt="" />	
		<div class="loading-box">
			<div class="box-one">
			<img src="images/loading_img.png"/>
		</div>
		<div class="txt">
			Loading
			<span class="loadingDot">
        <span></span>
        <span></span>
        <span></span>
</span>
		</div>
		<div class="box-two">
			<img src="images/loading_icon.png"/>
		</div>
		</div>		
			</div>
<!--loading end-->			
		<!--首页面  start -->
		<div id="j-first" class="first" style="display: none;">
			<div class="first-bg">
				<img class="first-bg-img" src="images/first_bj.jpg"/>
			</div>
			<div class="star-one moveOne">
				<img src="images/first_star_img.png"/>
			</div>
			<div class="star-two rotateOne">
				<img src="images/first_snowbig_img.png"/>
			</div>			
			<div class="star-three rotateOne">
				<img src="images/fist_snowsmall_img.png"/>
			</div>
			<div class="first-box">
				<div class="logo">
					<img src="images/logo_img.png"/>
				</div>
				<div class="first-txt">
					<img src="images/first_font_img.png"/>
				</div>
				<div class="first-part-one">
					<img src="images/first_card_img.png"/>
				</div>
				<div class="first-btn">
					制作贺卡
				<input type="file" accept="image/gif,image/jpeg,image/jpg,image/png,image/svg" id="inputImage"/>
				</div>
			</div>
		</div>
		</div>
		<!--首页面  end -->
				<!--上传照片后的页面  start -->
	
   <div class="endpage" style="display: none;">
        <canvas id="canvasId" width="" height=""></canvas>
        <div class="second-btn-row">
					<div class="first-btn fl" onclick="again();">
					重新选择
				</div>
				<div class="first-btn fl" onclick="savePage()" >
					发送贺卡
				</div>
				<div class="first-btn fl" onclick="share()">
					更多活动
				</div>
    </div>			
		
			
		
		<!--上传照片后的页面  end -->
		</div>
			<div class="uploaddone" style="display: none;">		
		
					<img src="" alt="" id="uploadDone"/>
				</div>
			 <div class="img-container" style="display: none;">
          <img src="images/i-four.jpg" alt="Picture">
          <div class="btn-row">
          	<div class="btn-one cancel" onclick="cancelImg();">
          		取消
          	</div>
          	<div class="btn-one comfirm" onclick="comfirmImg();" data-method="getCroppedCanvas" type="button">
          		确认
          	</div>
          </div>
        </div>
        <div class="mask" style="display: none;" onclick="hideShare()"></div>
			<div class="tip-box" onclick="hideShare()" style="display: none;">
				<img src="images/share_img.png"/>
			</div>
        	<img src="" crossorigin="anonymous" class="endimg" id="endimg"/>
	</body>
	<script src="js/jquery.min.js" type="text/javascript" charset="utf-8"></script>
		<link rel="stylesheet" type="text/css" href="css/cropper.min.css"/>
	<script src="js/cropper.js" type="text/javascript" charset="utf-8"></script>
	<script src="js/main.js" type="text/javascript" charset="utf-8"></script>
		<script src="js/jquery.imgpreload.min.js" type="text/javascript" charset="utf-8"></script>
<script type="text/javascript">

	function cancelImg(){
	$("#main").show();
	 $(".img-container").hide();
}
function comfirmImg(){
	
	$("#main").show();
	$("#first").hide();
	$("#second").show();
	 $(".img-container").hide();
	 $('.upload').hide();
	 
	// $('.uploaddone').show();	
	// $("#uploadDone").attr("src",$('.img-container > img').cropper("getCroppedCanvas").toDataURL());
}
	function upload(){
		$("#inputImage").click();
	}
$(function(){
	$('.ok').click(function(){
		$('.uploadtwo').hide();
	})
})
function again(){
	$("#inputImage").click();
	$(".endpage").hide();
}

function share(){
	$('.tip-box').show();
	$('.mask').show();
}
function hideShare(){
	$('.tip-box').hide();
	$('.mask').hide();
}
function initEndPage(){
	$('#main').hide();
 	$('.endpage').show();
    var textcontent="";
    //年现计算
    textcontent="转发贺卡到朋友圈既可参加IFC国金天地圣诞线下抽奖活动，礼品超多的喔~时间：2018.12.24（25）12：30-13：30地点：广州IFC国金天地负一层中庭更多优惠活动点击下方“更多活动”按钮了解吧";

    //姓名
    // $('#name').html(user.lname+" "+user.fname);
    // $("#myword").html("<?php echo ($inputTxt);?>");


    //canvas生成
    var mCanvas = document.getElementById("canvasId");
    var screenW = document.body.clientWidth;
    var screenH = window.screen.availHeight;
    mCanvas.width=screenW;
    mCanvas.height=screenH;
    var bb = mCanvas.getContext("2d");

    var img = new Image();
    var img2 = new Image();
    var img3 =new Image();
    var img4 =new Image();
    img2.src="images/again_card_img.png";
    img3.src="images/logo_img.png";
	img4.src=$("#upabc").attr('src');
   // if(uploadimg != undefined){
        img.src='images/again_bj.jpg';
        img.onload = function() {
            bb.drawImage(img, 0, 0,screenW,screenH);     
            bb.drawImage(img4, screenW*0.20, screenH*0.11,screenW*0.61,screenW*0.7);
            bb.drawImage(img2, screenW*0.12, screenH*0.1,screenW*0.8,screenW*1.15);     
            bb.drawImage(img3, screenW*0.1, screenH*0.02,screenW*0.4,screenW*0.08);
           
          
               bb.fillStyle = '#fff';   // 文字填充颜色
    bb.font="15px KaiTi";
    var b=textcontent.length/20;
    var h=screenH*0.1+screenW*0.9;
    for(var i=0;i<b+1;i++){
        var c=i-1;  
          if(i==0){
        	textcontent="转发贺卡到朋友圈既可参加IFC国金天地圣";
        	 bb.fillText(textcontent,screenW*0.22, h,200);
        }else if(i==1){
        	textcontent="诞线下抽奖活动，礼品超多的喔~";
        	 bb.fillText(textcontent,screenW*0.22, h,160);
        }else if(i==2){
        	textcontent="时间：2018.12.24（25）12：30-13：30";
        	 bb.fillText(textcontent,screenW*0.22, h,200);
        }else if(i==3){
        	textcontent="地点：广州IFC国金天地负一层中庭";
        	 bb.fillText(textcontent,screenW*0.22, h,200);
        }else if(i==4){
        	textcontent="更多优惠活动点击下方“更多活动”按钮了解吧";
        	 bb.fillText(textcontent,screenW*0.22, h,200);
        }else{
        	textcontent=""
        }
       h=h+20;
    }
   
        }

 



    bb.stroke();
    
}

var imgNum = 0;
var images = [];
$(function(){ preLoadImg(); });
 
//里面有两种方式
function preLoadImg() {
    //第一种方式：通过dom方法获取页面中的所有img，包括<img>标签和css中的background-image
    /*get all imgs those tag is <img> */
    var imgs = document.images;
    for (var i = 0; i < imgs.length; i++) {
        images.push(imgs[i].src);
    }
   
 
    /*这里是真正的图片预加载 preload*/
    $.imgpreload(images,
    {
        each: function () {

            /*this will be called after each image loaded*/
            var status = $(this).data('loaded') ? 'success' : 'error';
            if (status == "success") {                
                var v = (parseFloat(++imgNum) / images.length).toFixed(2);
               
                           
            }
        },
        all: function () {
            /*this will be called after all images loaded*/
       //    $("#load-num").html("100%");
           var i=0
         var timeIn = setInterval(function(){
         	console.log(i);
           	if(i<101){
           		 console.log(i + "%");   
           	}else{
           		clearInterval(timeIn);
           	}
    		i++
		},30);
           setTimeout(function(){
				$("#j-loading").hide()
       			$("#j-first").show()
           },3000)
           

        }
    });
}
 function savePage(){
       var canvas=  document.getElementById('canvasId');
        var image = $("#endimg");
       image.attr('src',canvas.toDataURL("images/png"));
    //   var context = canvas.getContext('2d');
   //    context.fillStyle = 'rgba(255, 255, 255, 0)';
      
    //   $('#canvasId').hide();
   //    $('.end-btn-row').hide();
   //    showtip();
   //    putb64(); //上传服务器
   }
</script>
</html>
